<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="doAction(event);">开始</button>
		<table border="" cellspacing="" cellpadding="10px" bgcolor="aqua">
			<tr>
				<td id="jp1">冰箱1</td>
				<td id="jp2">冰箱2</td>
				<td id="jp3">冰箱3</td>
			</tr>
			<tr>
				<td id="jp4">冰箱4</td>
				<td id="jp5">冰箱5</td>
				<td id="jp6">冰箱6</td>
			</tr>
			<tr>
				<td id="jp7">冰箱7</td>
				<td id="jp8">冰箱8</td>
				<td id="jp9">冰箱9</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		function doAction(event){
			event.target.innerText = '抽奖中...';
			var allTds = document.getElementsByTagName('td');
			for(var i=0;i<allTds.length;i++){
				allTds[i].style.backgroundColor = 'aqua';
			}
			setTimeout(function(){
				var randNum  = getRandValidNum();
				console.log('公布抽奖结果:'+randNum);
				document.getElementById('jp'+randNum).style.backgroundColor = 'red';
				event.target.innerText = '重新抽奖';
			},5000);
		
		//递归
		function getRandValidNum(){
			while(true){
				var randNum = Math.floor(Math.random()*10);
				if(randNum!=0){
					return randNum;
				}
			}				
		}
	</script>
</html>
